---
title: Configuration
excerpt: Initialization and options for NextDrupal client.
---

## Initialization

### App Router

To create a new `NextDrupal` client, use the following initialization:

```ts
import { NextDrupal } from "next-drupal"

const drupal = new NextDrupal(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL)
```

Where `NEXT_PUBLIC_DRUPAL_BASE_URL` is the URL to your Drupal site defined as an [environment variable](/docs/environment-variables).

```txt title=.env.local
NEXT_PUBLIC_DRUPAL_BASE_URL=http://example.com
```

### Pages Router

To create a new `NextDrupal` client, use the following initialization:

```ts
import { NextDrupaPages } from "next-drupal"

const drupal = new NextDrupalPages(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL)
```

Where `NEXT_PUBLIC_DRUPAL_BASE_URL` is the URL to your Drupal site defined as an [environment variable](/docs/environment-variables).

```txt title=.env.local
NEXT_PUBLIC_DRUPAL_BASE_URL=http://example.com
```

---

## Options

Additional options can be passed during initialization to customize the behaviors of the client.

### apiPrefix

- **Default value**: `/jsonapi`
- **Required**: No

The JSON:API prefix to use. If you are using the [JSON:API Extras](https://www.drupal.org/project/jsonapi_extras) module, you can customize the JSON:API prefix and set the custom value here.

```ts
new NextDrupal(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
  apiPrefix: "/api",
})
```

---

### frontPage

- **Default value**: `/home`
- **Required**: No

Use this to set the path for your front page. This path will resolve to `/` on your Next.js site.

```ts
new NextDrupal(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
  frontPage: "/front",
})
```

---

### auth

- **Default value**: `null`
- **Required**: No

Override the default auth. You can use this to implement your own custom auth.

You can find more info about using a custom auth [here](/docs/authentication).

---

### deserializer

- **Default value**: Built-in
- **Required**: No

Override the default data deserializer. You can use this to add your own JSON:API data deserializer.

```ts
import { Deserializer } from "jsonapi-serializer"

const jsonDeserializer = new Deserializer({
  keyForAttribute: "camelCase",
})

const customDeserializer = jsonSerializer.deserialize.bind(jsonSerializer)

new NextDrupal(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
  deserializer: customDeserializer,
})
```

You can find more info about using a custom deserializer [here](/docs/deserializer).

#### Pages Router

This option is called `serializer` in the `NextDrupalPages` client. Aside from that, the usage is the same.

```ts
import { Deserializer } from "jsonapi-serializer"

const jsonDeserializer = new Deserializer({
  keyForAttribute: "camelCase",
})

const customDeserializer = jsonSerializer.deserialize.bind(jsonSerializer)

new NextDrupalPages(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
  serializer: customDeserializer,
})
```

---

### fetcher

- **Default value**: `fetch`
- **Required**: No

Override the default fetcher.

```ts
import crossFetch from "cross-fetch"

const customFetcher = (url, options) => {
  const { withAuth, ...opts } = options

  if (withAuth) {
    // Make additional requests to fetch a bearer token
    // Or any other Authorization headers.
  }

  return crossFetch(url, {
    ...opts,
  })
}

new NextDrupal(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
  fetcher: customFetcher,
})
```

You can find more info about using a custom fetcher [here](/docs/fetcher).

---

### cache

- **Default value**: `null`
- **Required**: No

Implement a custom cache for caching data during builds.

```ts
import { DataCache } from "next-drupal"
import Redis from "ioredis"

const redis = new Redis(process.env.REDIS_URL)

export const redisCache: DataCache = {
  async set(key, value) {
    return await redis.set(key, value)
  },

  async get(key) {
    return await redis.get(key)
  },
}

new NextDrupal(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
  cache: redisCache,
})
```

You can find more info about using a custom cache [here](/docs/cache).

---

### logger

- **Default value**: `console`
- **Required**: No

Implement a custom logger. You can use this to send logs to a third-party service.

---

### withAuth

- **Default value**: `false`
- **Required**: No

Set whether the client should use authenticated requests by default. If set to `true`, all calls to Drupal will use the configured authentication.

---

### headers

- **Default value**: `{ "Content-Type": "application/vnd.api+json", Accept: "application/vnd.api+json" }`
- **Required**: No

Set custom headers for the fetcher.

```ts
new NextDrupal(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
  headers: {
    "Content-Type": "application/json",
  },
})
```

---

### accessToken

- **Default value**: `null`
- **Required**: No

A long-lived access token you can set directly on the client.

---

### debug

- **Default value**: `false`
- **Required**: No

Use this to turn on the built-in logger. If you would like to replace with your own logger, see [#logger](/docs/client/configuration#logger)
.

---

### throwJsonApiErrors

- **Default value**: `true`
- **Required**: No

JSON:API errors are thrown in non-production environments by default. The errors are shown in the Next.js overlay. Use this to turn it off.

---

### useDefaultEndpoint

- **Default value**: `true`
- **Required**: No

By default, the resource endpoint will be based on the resource name. If you turn this off, a JSON:API request will retrieve the resource's endpoint url.
